<template >
      <el-dialog
          :close-on-click-modal="false" :width="width"
          :destroy-on-close="destroyClose"
          :show-close="showClose"
          :fullscreen="fullscreen"
          @close="close" @open="open" :title="title" :append-to-body="appendBody">
        <slot/>
        <template v-if="footer" #footer>
          <div style="text-align: right" >
            <el-button :loading="confirmLoading" @click="visibleConfirm" type="primary"
                       style="margin-right: 15px">确认</el-button>
            <el-button type="info" @click="visibleCancel" v-show="showClose">取消</el-button>
          </div>
        </template>
      </el-dialog>
</template>

<script>
import {defineComponent, ref} from 'vue'

export default defineComponent({
  name: 'Dialog',
  props: {
    width: {
      type: String,
      default: '40%'
    },
    title: {
      type: String
    },
    destroyClose: {
      default: false
    },
    footer: {
      default: true
    },
    appendBody: {
      default: false
    },
    showClose: {
      type: Boolean,
      default: true
    },
    confirmLoading: {
      type: Boolean,
      default: false
    },
    fullscreen:{
      type:Boolean,
      default:false
    }
  },
  emits: {
    'cancel': null,
    'open': null,
    'close': null,
    'confirm': null,
  },
  data() {
    return {
      show: false
    }
  },
  methods: {
    visibleConfirm() {
      this.$emit('confirm')
    },
    visibleCancel() {
      this.$emit('cancel', false)
    },
    close() {
      this.$emit('close',false)
    },
    open() {
      this.$emit('open')
    },
  },
})
</script>

<style>
.el-dialog__header {
  height: 24px;
}

.el-dialog__header {
  padding: 15px 20px 10px !important;
  border-bottom: 1px solid #e8e8e8;
}

.el-dialog__body {
  border-bottom: 1px solid #e8e8e8;
}

.el-dialog {
  border-radius: 3px !important;
}

.el-dialog__footer {
  padding: 15px !important;
}
</style>
